<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>石油大学软件缺陷管理系统</title>
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <script src="js/jquery.js"></script>
    <script src="js/layer.js"></script>
    <script>
        function selectPrj (){

            layui.use(['upload', 'layer','table','form'], function () {
                let form = layui.form;
                let table = layui.table;
                updateList = []
                currentProjectId = $('#projectSelect :selected').val()
                table.reload('myTable', {
                    where: {
                        "prjId": currentProjectId
                    },
                });
            })
        }
    </script>
</head>
<style>
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("img/bg4.jpeg");
        /* 设置背景图片透明度 */
        opacity: 0.1;
        z-index: -1; /* 将伪元素放置于页面下方 */
    }
</style>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header  layui-bg-blue">
        <div class="layui-logo  layui-bg-blue layui-nav-img"
             style="font-weight: bold;font-size: 17px">
            <img src="img/bg3.jpg" alt="logo" style="width: 55px; height: auto;">
            石油大学软件缺陷管理系统</div>
        <ul class="layui-nav layui-layout-left"></ul>
        <c:if test="${loginUser==null}">
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item"><a href="login.jsp">请登录</a></li>
            </ul>
        </c:if>
        <c:if test="${loginUser!=null}">
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item"><a>${loginUser.username}</a></li>
                <li class="layui-nav-item"><a href="authLogout">退出登录</a></li>
            </ul>
        </c:if>
    </div>

    <div class="layui-side layui-bg-blue">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <!-- 侧边栏 -->
                <!-- jsp文件添加另一个组件？ -->
                <jsp:include page="menu.jsp">
                    <jsp:param value="active" name="Func_allocate"/>
                </jsp:include>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <div class="search_style" style="padding-top: 13px;padding-left: 15px;">
            <div class="searchTable">
                <div class="layui-inline" style="margin-top: -28px">选择项目：</div>
                <div class="layui-inline"  >
                    <form class="layui-form layui-form-pane" action="" >
                        <div class="layui-form-item">
                            <div class="layui-inline"  style="width: 150px;">
                                <select id="projectSelect" lay-filter="projectSelect">
                                </select>
                            </div>
    <%--                        <div class="layui-inline" style="margin-top: 15px" >
                                <div class="layui-form-item">
                                    <button class="layui-btn" onclick="selectPrj()" >查询</button>
                                </div>
                            </div>--%>
                        </div>
                    </form>
                </div>
            </div>

        </div>
        <!-- 内容主体区域 -->
        <table class="layui-table" id="myData" lay-filter="myTable" style="margin-top: -22px"></table>
    </div>
</div>
<script src="js/layui/layui.js"/>
<script>

</script>
<script type="text/html" id="myToolbar">
    <button id = "changeProject" lay-event="changeProject" class="layui-btn layui-btn-sm layui-bg-blue">查询分配</button>
    <button id = "submit" lay-event="submit" class="layui-btn layui-btn-sm layui-bg-blue layui-btn-disabled ">保存分配</button>
    <button id = reset lay-event="reset" class="layui-btn layui-btn-sm layui-bg-blue layui-btn-disabled ">重置分配</button>
</script>

<script>

    //记录当前项目id
    let currentProjectId
    const table = layui.table;
    let userList = [];
    var updateList = [];

    //请求userlist
    // $.ajax({
    //     // url: 'getUserList',
    //     url:'getUserListByuserType',
    //     type: 'POST',
    //     //设置为同步执行（好像不起作用？）
    //     async:false,
    //     dataType: 'JSON',
    //     success: function (data) {
    //         //请求成功
    //         console.log(data)
    //         userList = data;
    //     },
    //     error: function () {
    //         alert("服务器异常，请稍后重试.");
    //     }
    // })
    $.ajax({
        url: "getUserListByuserType",
        dataType: "json",
        type: "POST",
        // data: {'userType':'普通用户'},
        success: function (result) {

            userList = result.data;    //返回的数据
        }
    })
    var tableReload

    layui.use(['upload', 'layer','table','form'], function () {
        let table = layui.table;
        let form = layui.form;


        //获取project信息
        $.ajax({
            url: 'getPrjList',
            data: {userId: ${loginUser.id}},
            dataType: 'json',
            type: 'get',
            async: false,
            success: function (data) {
                /*测试用
                            data = [{"prjId":"1", "prjName":"bug缺陷管理系统"},
                                {"prjId":"2", "prjName":"学生信息管理系统"}]
                */
                //判断：是否有数据返回
                if (data.length === 0) {
                    layer.msg("您不是任何项目的负责人", {icon: 5});
                    return;
                }

                $.each(data, function (index, item) {



                    let option = new Option("("+item.id + ') ' + item.proName, item.id);

                    $('#projectSelect').append(option);// 下拉菜单里添加元素
                });

                currentProjectId = data[0].prjId;
                form.render("select");
                //重新渲染 固定写法
            }
        })






        table.render({
            elem: '#myData',
            id: 'myTable',
            url: 'funcSelect',
            data:{"prjId":currentProjectId},
            initSort: {
                field: 'modId', // 按 id 字段排序
                type: 'asc' // 降序排序
            },
            parseData: function (res) { //res：即为原始返回的数据
                // let result = this.page.curr ? res.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr) : res.slice(0, this.limit);
                for (const row of res) {
                    row.modId = row.module.modId
                    row.modName = row.module.modName
                }

                console.log(res)
                return {
                    "code": 0, //解析接口状态
                    "msg": '', //解析提示文本
                    "count": res.length, //解析数据长度（集合个数）
                    "data": res //解析数据列表
                };
            },
            toolbar: '#myToolbar', //开启头部工具栏，并为其绑定左侧模板
            defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            title: '用户列表',
            cols: [
                [
                        {
                            field: 'modId',
                            title: '模块ID',
                        },
                        {
                            field: 'modName',
                            title: '模块名',
                          /*  event: 'info',*/
                        },
                        {
                            field: 'funcId',
                            title: '功能ID',
                            // templet: vo => vo.userSex ? vo.userSex : "",
                        },
                        {
                            field: 'funcName',
                            title: '功能名',
                        },
                        {
                            field: 'devDays',
                            title: '开发日期',
                        },
                    {
                        field:'user',
                        title: '分配用户',
                        width:150,
                        align: 'center',
                        templet:  function(d){
                            // console.log(d); // 得到当前行数据
                            // console.log(this); // 得到表头当前列配置项
                            // console.log(d.LAY_NUM); // 得到序号。或其他特定字段
                            //当前行的用户id
                            let selected = d.user.id

                            let options = '';

                            for (const x of userList) {
                                let option;
                                // console.log(x);
                                if(x.userType=='普通用户'){
                                    if (x.id == selected){
                                        option =  '<option value= "' + x.id+' "selected>'+x.username+'</option>'
                                    }else {
                                        option =  '<option value= "' + x.id+' ">'+x.username+'</option>'
                                    }
                                    options = options + option
                                }
                            }
                            // 返回模板内容
                            // return '<div class="layui-col-md6"> <select class="select-demo-primary"> <option value="">请选择</option> <option value="AAA">选项 A</option> <option value="BBB">选项 B</option> <option value="CCC">选项 C</option> </select> </div>'
                            // return '<div class="layui-form"><select class="select-demo-primary">'+ options +'</select></div>'
                            return '<select  lay-filter="editStateS"  class="tableSelect">'+ options +'</select>'
                        }
                    }
                ]
            ],
            done: function(res, curr, count){
                //数据渲染完的回调。
                //由于layui 设置了超出隐藏，所以这里改变下，以兼容操作按钮的下拉菜单
                $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible')
        }});

        table.on('toolbar(myTable)', function (obj) {
            //obj.event再对该toolbar中的元素的lay-event属性的值进行筛选
            if (obj.event == 'submit' && !$("#submit").hasClass("layui-btn-disabled")) {
                //检测按钮是否被禁用
                flag = true
                for (const x of updateList) {
                    updateAllocate(x.funcId, x.userId)
                }

                //清空队列
                updateList = []
                table.reload('myTable')

            }else if(obj.event == 'reset' && !$("#reset").hasClass("layui-btn-disabled")){
                //清空队列
                updateList = []
                table.reload('myTable');
            }
            else if(obj.event == 'changeProject' ){
                //清空队列
                updateList = []
                currentProjectId = $('#projectSelect :selected').val()
                table.reload('myTable',{where: {
                        "prjId" : currentProjectId
                    },});
            }
            //禁用提交、重置按钮
            $("#reset").addClass("layui-btn-disabled")
            $("#submit").addClass("layui-btn-disabled")
        })


/*        form.on('submit(save_filter)', function(obj){
            if(obj.event =="selectPrj") {

            }
        })*/


        //监听用户分配下拉框编辑
        form.on('select(editStateS)', function (data) {
            //获取当前行tr对象
            var elem = data.othis.parents('tr');
            //取funcId
            var funcId= elem.first().find('td').eq(2).text();
            console.log(funcId)
            //选择的select对象值：userId
            var userId = data.value;
            console.log(userId)

            //加入数组
            updateList.push({"funcId":funcId, "userId": userId})

            //启用提交按钮和重置按钮
            $("#submit").removeClass("layui-btn-disabled")
            $("#reset").removeClass("layui-btn-disabled")
            //这里的JsonDataInti是我自定义的table中数据的缓存数据，下拉数据修改时赋值到这一行缓存数据
            /*            for (i = 0; i < jsonDataInit.length; i++) {
                            if (jsonDataInit[i].Guid== Guid) {
                                jsonDataInit[i].NewReformStatus = selectValue; //更新被修改的行数据
                            }
                        }*/
        })

        function updateAllocate(funcId, userId) {
            $.ajax({
                url: 'updateAllocate',
                type: 'POST',
                contentType: "application/json; charset=utf-8",

                data: JSON.stringify({"list" :updateList }),
                //异步？
                async:false,
                dataType: "json",

                success: function (data) {
                    //请求成功
                    if (data.code == 0) {
                        return true
/*                        alert("提交更改成功");
                        table.reload('myTable')*/
                    }
                },
                error: function () {
                    return false
                    alert("服务器异常，请稍后重试.");
                }
            });
        }

        //监听项目选择框编辑
        form.on('select(projectSelect)', function (data) {
            //判断当前表格是否有修改：
            if(!$("#submit").hasClass("layui-btn-disabled")){
                alert("当前项目您有未保存的更改！")
                return
            }
            const projectId = data.value;
            currentProjectId = projectId;

            //重新刷新表格
            table.reload('myTable')

        })
    });

    //存储要更新的项目信息


</script>
<style>
<%--    调整selcet选择框大小 --%>
    td .layui-form-select {
        margin-top: -10px;
        margin-left: -15px;
        margin-right: -15px;
    }
</style>
</body>
</html>
